實戰演練 - Day5

我們昨天練習了景點列表，學到圖片放大或圓角外層要加上 overflow-hidden，圖片固定高度加上 object-cover 避免圖片變形，安裝 line-clamp 插件搭配 line-clamp-{行數} 限制文字顯示行數。
今天練習部分是 footer 區塊，相較前面會比較輕鬆，那麼開始今天的練習吧！

今日進度

pc

pad

mobile

核心觀念

HTML 標籤

既然都叫 footer 區塊，當然要使用 footer 標籤囉，千萬不要都用 div 標籤。
舉例來說：導覽列使用 nav ，列表使用 ul 搭配 li，依照區塊內容使用對應標籤提升閱讀及維護性。

<footer>
  ...
</footer>

footer

整體區塊

背景顏色 #202225 、上下推 40px 間距。

• bg-color
• padding

<footer class="bg-gray-400 py-10">
  ...
</footer>

連結列表

1. 區塊在中間並左右排版，連結之間間距 20px。
2. 滑鼠停留圖片會向上平移。

• flex
• justify-center
• gap
• hover
• translate
• transition

<ul class="flex justify-center gap-5">
  <li>
    <a href="javascript:;">
      <img
        src="./img/icon/icon-facebook.svg"
        alt="facebook-icon"
        class="duration-300 hover:-translate-y-2"
      />
    </a>
  </li>
  <li>
    <a href="javascript:;">
      <img
        src="./img/icon/icon-line.svg"
        alt="line-icon"
        class="duration-300 hover:-translate-y-2"
      />
    </a>
  </li>
  <li>
    <a href="javascript:;">
      <img
        src="./img/icon/icon-instagram.svg"
        alt="instagram-icon"
        class="duration-300 hover:-translate-y-2"
      />
    </a>
  </li>
</ul>

文字

文字顏色 #B9BBBE 並置中，與上方距離 12px。

• text-color
• text-center
• margin

<p class="mt-3 text-center text-gray-100">Taiwan NO.1 Travel</p>

檔案連結

• 設計稿
• github repo
• github pages

本日重點

1. 不要都用 div 標籤，依照區塊內容使用對應標籤。
2. 元素內間距用 padding，元素外部間距用 margin。

參考

• Tailwind CSS 官網
• Tailwind CSS - Day12 - 掌握空間與距離，版面不再跑版